<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Mobile locating Extension Popup html</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    </head>
    <body>
        <form action="#query" method="POST">
            <span>Mobile: </span><input type="text" id="mobile" name="mobile" /><button type="submit">GO</button>
        </form>
        <div style="max-width: 700px; min-width: 200px; height: auto;" id="result"></div>
        <script type="text/javascript">
            var Bg = chrome.extension.getBackgroundPage();
            var Utils = Bg.Utils;
            var g_mobile = document.getElementById('mobile');
            g_mobile.focus();
            document.forms[0].onsubmit = function(){
                var m = g_mobile.value.trim();
                if(!mobile_check(m)){
                    Utils.log('mobile:'+ m + ' does not pass mobile_check!');
                    var r = document.getElementById('result');
                    r.innerHTML = '<strong>格式错误</strong>';
                    g_mobile.focus();
                    return false;
                }
                chrome.extension.sendRequest({mobile: m}, display);
                return false;
            }

            //strip whitespace 
            String.prototype.trim = function(){
                return this.replace(/^\s+|\s+$/g, '');
            }

            function mobile_check(m){
                if(m && m.charAt(0) == '1' && m.length == 11){
                    return true;
                }
                return false;
            }
            function display(data){
                var r = document.getElementById('result');
                if(data && data.QueryResult == 'True'){
                    var mobile = '<p>手机号码: ' + data.Mobile + '</p>';
                    var province = '<p>所属省份: ' + data.Province + '</p>';
                    var city = '<p>所属城市: ' + data.City + '</p>';
                    var areacode = '<p>区号: ' + data.AreaCode + '</p>';
                    var postcode = '<p>邮编: ' + data.PostCode + '</p>';
                    var cardtype = '<p>卡类型: ' + data.Corp + ' ' + data.Card + '</p>';
                    var text = mobile + province + city + areacode + postcode + cardtype;
                    r.innerHTML = text;
                }
                else{
                    r.innerHTML = '<strong>No Result</strong>'; 
                }
                g_mobile.focus();
            }
        </script>
    </body>
</html>
